import React, { useState } from 'react';
import { Layout } from './Layout';
import { User as UserType } from '../App';
import { QrCodeScanner } from './guard/QrCodeScanner';
import { TodayRecords } from './guard/TodayRecords';
import { Scan, Clock } from 'lucide-react';

interface GuardDashboardProps {
  user: UserType;
  onLogout: () => void;
}

export const GuardDashboard: React.FC<GuardDashboardProps> = ({ user, onLogout }) => {
  const [activeTab, setActiveTab] = useState('scanner');

  const menuItems = [
    { id: 'scanner', name: '扫码核验', icon: Scan },
    { id: 'records', name: '今日记录', icon: Clock },
  ];

  const sidebar = (
    <nav className="mt-5 px-2 space-y-1">
      {menuItems.map((item) => {
        const isActive = activeTab === item.id;
        return (
          <button
            key={item.id}
            onClick={() => setActiveTab(item.id)}
            className={`${
              isActive
                ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100'
                : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'
            } group flex items-center px-2 py-2 text-sm font-medium rounded-md w-full transition-colors`}
          >
            <item.icon
              className={`${
                isActive ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'
              } mr-3 h-6 w-6`}
            />
            {item.name}
          </button>
        );
      })}
    </nav>
  );

  const renderContent = () => {
    switch (activeTab) {
      case 'scanner':
        return <QrCodeScanner />;
      case 'records':
        return <TodayRecords />;
      default:
        return <QrCodeScanner />;
    }
  };

  return (
    <Layout user={user} onLogout={onLogout} sidebar={sidebar}>
      {renderContent()}
    </Layout>
  );
};